
<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <div class="bench_search">
      <div class="input-frame">
        <span>姓名：</span>
        <Input style="width: 150px;" v-model="searchInfo.name" />
      </div>
      <div class="input-frame">
        <span>身份证号：</span>
        <Input style="width: 250px;" v-model="searchInfo.cardno" />
      </div>
      <div class="input-frame">
        <span>手机号：</span>
        <Input style="width: 200px;" v-model="searchInfo.mobile" />
      </div>
      <div class="input-frame">
        <span>重点人群：</span>
        <Select v-model="searchInfo.focusgroup" multiple style="width: 200px;">
          <Option v-for="item in labelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
    <!--  <Col span="6" offset="1">
        <span>区：</span>
        <Select :disabled="Adisabled" v-model="searchInfo.area_id" style="width:164px" clearable @on-change="findDistrictList(3,searchInfo.area_id)" @on-clear="clearMsg(3)">
          <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
        </Col>
      <Col span="6" offset="1">
        <span>街道：</span>
        <Select :disabled="Bdisabled" v-model="searchInfo.street_id" style="width:164px" clearable @on-change="findDistrictList(4,searchInfo.street_id)" @on-clear="clearMsg(4)">
          <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </Col>
      <Col span="6" offset="1">
        <span>社区：</span>
        <Select v-model="searchInfo.communityid" style="width:164px" clearable>
          <Option v-for="item in List3" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </Col>-->
      <Button class="new-btn-sty" @click="searchData" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
    </div>
    <Modal v-model="modal1" title="详情" width="700">
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">姓名:</Col>
        <Col span="12" offset="1">{{paramData1.TMname}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="">身份证号:</Col>
        <Col span="12" offset="1">{{paramData1.TMcardno}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">手机号:</Col>
        <Col span="12" offset="1">{{paramData1.TMmobile}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">国籍:</Col>
        <Col span="12" offset="1">{{paramData1.register_country}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">户籍-省:</Col>
        <Col span="12" offset="1">{{paramData1.register_province}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">户籍-市:</Col>
        <Col span="12" offset="1">{{paramData1.register_city}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">户籍-区:</Col>
        <Col span="12" offset="1">{{paramData1.register_area}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">户籍-街道:</Col>
        <Col span="12" offset="1">{{paramData1.register_street}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">户籍-社区:</Col>
        <Col span="12" offset="1">{{paramData1.register_community}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">出生日期:</Col>
        <Col span="12" offset="1">{{paramData1.birthday}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">民族:</Col>
        <Col span="12" offset="1">{{paramData1.folk}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">身份证头像:</Col>
        <Col span="12" offset="1">{{paramData1.idphoto}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">档案信息:</Col>
        <Col span="12" offset="1">{{paramData1.photo}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">文化程度:</Col>
        <Col span="12" offset="1">{{paramData1.education}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">婚姻状况:</Col>
        <Col span="12" offset="1">{{paramData1.marriage}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">政治面貌:</Col>
        <Col span="12" offset="1">{{paramData1.political_outlook}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">职业:</Col>
        <Col span="12" offset="1">{{paramData1.occupation}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">兵役情况:</Col>
        <Col span="12" offset="1">{{paramData1.military}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">个人收入:</Col>
        <Col span="12" offset="1">{{paramData1.personal_income}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">工作单位:</Col>
        <Col span="12" offset="1">{{paramData1.work_unit}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">父亲姓名:</Col>
        <Col span="12" offset="1">{{paramData1.fq_xm}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">父亲证件号码:</Col>
        <Col span="12" offset="1">{{paramData1.fq_card_no}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">母亲姓名:</Col>
        <Col span="12" offset="1">{{paramData1.mq_xm}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">母亲证件号码:</Col>
        <Col span="12" offset="1">{{paramData1.mq_card_no}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">配偶姓名:</Col>
        <Col span="12" offset="1">{{paramData1.po_xm}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">配偶证件号码:</Col>
        <Col span="12" offset="1">{{paramData1.po_card_no}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">生育子女:</Col>
        <Col span="12" offset="1">{{paramData1.child}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">重点人群:</Col>
        <Col span="12" offset="1">{{paramData1.focus_group}}</Col>
      </Row>
      <Row class="item1">
        <Col span="7" style="text-align: right" class="red-name">备注:</Col>
        <Col span="12" offset="1">{{paramData1.remarks}}</Col>
      </Row>
      <div slot="footer">
        <Button :loading="modal_loading" @click="modal1 = false">关闭</Button>
      </div>
    </Modal>
    <Table border :columns="columns1" :data="datalist"></Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style" show-total  show-sizer @on-page-size-change="size"/>
  </Card>
</template>

<script>
import { findFocusPeopleList, findSubordinateList, getUserDetailInfo } from '@/api/eventlist'

export default {
  name: 'focuspeoplelist',
  data () {
    return {
      modal_loading: false,
      paramData1: {},
      modal1: false,
      Adisabled: false,
      Bdisabled: false,
      searchInfo: { name: '', cardno: '', mobile: '', focusgroup: '' },
      List1: [],
      List2: [],
      List3: [],
      severUserInfo: {},
      loadData: true,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      paramData: {},
      labelList: [
        {
          value: '低保家庭',
          label: '低保家庭'
        },
        {
          value: '保障房家庭',
          label: '保障房家庭'
        },
        {
          value: '残疾人',
          label: '残疾人'
        },
        {
          value: '优抚对象',
          label: '优抚对象'
        },
        {
          value: '高龄老人',
          label: '高龄老人'
        },
        {
          value: '空巢老人',
          label: '空巢老人'
        },
        {
          value: '留守儿童',
          label: '留守儿童'
        },
        {
          value: '大病人群',
          label: '大病人群'
        },
        {
          value: '奖扶特扶人群',
          label: '奖扶特扶人群'
        },
        {
          value: '独生子女补助人群',
          label: '独生子女补助人群'
        },
        {
          value: '走访人群',
          label: '走访人群'
        },
        {
          value: '纠纷人群',
          label: '纠纷人群'
        },
        {
          value: '失业人员',
          label: '失业人员'
        },
        {
          value: '其它',
          label: '其它'
        }
      ],
      columns1: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '姓名', key: 'TMname', width: 140, align: 'center' },
        { title: '性别', key: 'sex', width: 140, align: 'center' },
        { title: '身份证号', key: 'TMcardno', width: 200, align: 'center' },
        { title: '手机号', key: 'TMmobile', width: 200, align: 'center' },
        { title: '重点人群类型', key: 'focus_group', width: 250, align: 'center' },
        { title: '现住址', key: 'present_address', width: 250, align: 'center' },
        { title: '户籍地址', key: 'register_address', width: 250, align: 'center' },
        {
          title: '操作',
          key: 'action',
          width: 182,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.getInfo(params.row.id)
                  }
                }
              }, '查看详情')
            )
            return h('div', temp)
          }
        }
      ],
      datalist: []
    }
  },
  methods: {
    init (param) {
      let that = this
      param.pageNo = that.currentPageNo
      param.pageSize = that.currentPageSize
      findFocusPeopleList(param).then(res => {
        console.log(res)
        console.log(param)
        if (res.data.errcode === 0) {
          console.log(res)
          that.datalist = res.data.data.results
          that.totalnum = res.data.data.totalRecord
          that.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
        }
      })
    },
    searchData () {
      let params = {
        name: this.searchInfo.name,
        cardno: this.searchInfo.cardno,
        mobile: this.searchInfo.mobile,
        focusgroup: this.searchInfo.focusgroup.toString()
      }
      console.log(params)
      this.currentPageNo = 1
      this.init(params)
    },
    getInfo (id) {
      getUserDetailInfo({ id: id }).then(res => {
        console.log(res.data.data)
        if (res.data.errcode === 0) {
          this.paramData1 = res.data.data
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let param = {
      }
      this.init(param)
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.change()
    },
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
            console.log(this.List1)
          } else if (e1 === 3) {
            this.List2 = ret.data.data
            console.log(this.List2)
          } else if (e1 === 4) {
            this.List3 = ret.data.data
            console.log(this.List3)
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    clearMsg (e1) {
      if (e1 === 3) {
        this.searchInfo.street_id = ''
        this.searchInfo.community_id = ''
      } else if (e1 === 4) {
        this.searchInfo.community_id = ''
      }
    }
  },
  mounted () {
    let param = {
    }
    this.init(param)
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.findDistrictList(2, '999999999')
  }
}
</script>
<style>
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.bench_search {
  margin-bottom: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.code-img1 {
  height: 60%;
  width: 90%;
  margin-left: 5%;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.input-frame {
  margin-right: 40px;
  float: left;
}
</style>
